<!DOCTYPE html>
<head>
    <title>
       模板语法-插值
    </title>
<script src="vue.js"></script>
</head>
<body>
<!-- <div id = "app" v-once> -->
<div id = "app">
    {{ m }}
    <p v-html='rawHtml'>using mustaches:{{ rawHtml }}</p>
    <p v-bind:class='color'>test...</p>
    <p v-bind:class='colorB'>test...</p>
    <p>{{ number ++ }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split("").reverse().join("") }}</p>
</div>
<script type="text/javascript">
    var data = { m : 111 };
    var vm = new Vue({
        el : "#app",
        data : {
            m : 'hi vue',
            rawHtml : '<span style="color:red">this should be red.</sapn>',
            color : 'red',
            colorB : 'blue',
            number : 100,
            ok : 0,
            message : "zhengdongfang"
        },
    }); 
    vm.$watch('m', function(newVal, oldVal){
        console.log('value change from',newVal,2, oldVal)
    })
    
    vm.m = 'test'
</script>
<style type='text/css'>
    .red{color:red}
    .blue{color:blue; font-size: 100px;}
</style>
</body>
